<!-- 右 -->
<template>
  <div class="gong-box">
    <!-- <div class="gong-header">
      <div class="gong-header1">
        <i>**</i>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="gong-header2">
        <el-tag v-for="tag in tags" :key="tag.name" closable :type="tag.type">
          {{ tag.name }}
        </el-tag>
      </div>
    </div> -->
    <div class="gong-bbody">
      <div class="gong-CM">
        <div class="CM-box1">
          <div class="KU-box1">
            <div class="B-box1">
              <div>经营概况</div>
              <div>
                <span>实时</span>
                <span>昨天</span>
                <span>近七天</span>
                <span>进三十天</span>
              </div>
              <div></div>
            </div>
            <div class="B-box2">
              <div>
                <span class="span-span1">今日点单量</span
                ><span class="span-span"> <b>0</b> </span>
              </div>
              <div>
                <span class="span-span1">今日支付金额</span
                ><span class="span-span">￥：<b>0</b></span>
              </div>
            </div>
          </div>
          <div class="KU-box2">
            <div class="B-box1-1">
              <div></div>
              <div></div>
              <div>更新时间：2021/07/025</div>
            </div>
            <div class="B-box2">
              <div>
                <span class="span-span1">今日访客数</span
                ><span class="span-span"> <b>0</b> </span>
              </div>
              <div>
                <span class="span-span1">今日客单价</span
                ><span class="span-span">￥：<b>0</b></span>
              </div>
            </div>
          </div>
        </div>
        <!-- //////第二个 -->
        <div class="CM-box2">
          <div class="KU-box1-1">
            <div class="B-box1">
              <div>经营概况</div>
              <div></div>
              <div></div>
            </div>
            <div class="B-box2">
              <div>
                <span class="span-span1">代发货</span
                ><span class="span-span"> <b>1</b> </span>
              </div>
              <div>
                <span class="span-span1">退款中</span
                ><span class="span-span"> <b>0</b> </span>
              </div>
              <div>
                <span class="span-span1">库存预警</span
                ><span class="span-span">￥：<b>1</b></span>
              </div>
            </div>
          </div>
          <div class="KU-box1-1">
            <div class="B-box1">
              <div>经营概况</div>
              <div></div>
              <div></div>
            </div>
            <div class="B-B-box2">
              <div>
                <span class="span-span"> <b>1</b> </span>
                <span class="span-span1">代发货</span>
              </div>
              <div>
                <span class="span-span"> <b>0</b> </span>
                <span class="span-span1">退款中</span>
              </div>
              <div>
                <span class="span-span">￥：<b>1</b></span>
                <span class="span-span1">库存预警</span>
              </div>
            </div>
          </div>
        </div>
        <div class="CM-box3">
          <div class="KU-box1">
            <!-- 柱形图 -->
            <div id="main"></div>
          </div>
          <div class="KU-box2">
            <div class="Bbutt-box1-1">
              <div></div>
              <div></div>
              <div>
                <button class="button1-1">按时</button>
                <button class="button1-2">按天</button>
              </div>
            </div>
            <div class="B-box2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tags: [
        { name: "首页", type: "" },
        { name: "活动", type: "success" },
        { name: "列表", type: "info" },
        { name: "活动详情", type: "warning" },
        { name: "详情", type: "danger" },
      ],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    mainList() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          data: ["成交额", "访客", "访问量"],
        },
        xAxis: [
          {
            type: "category",
            data: [
              "2021-03-02",
              "2021-03-06",
              "2021-03-10",
              "2021-03-14",
              "2021-03-18",
              "2021-03-22",
              "2021-03-26",
              "2021-03-30",
            ],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "水量",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} ml",
            },
          },
          {
            type: "value",
            name: "温度",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} °C",
            },
          },
        ],
        series: [
          {
            name: "成交额",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
          },
          {
            name: "访客",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "访问量",
            type: "line",
            yAxisIndex: 1,
            data: [
              2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2,
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.mainList();
  },
};
</script>
<style lang='scss' scoped>
.gong-box {
  width: 100%;
  height: 100%;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
}

.gong-bbody {
  width: 100%;
  height: 100%;
  background: rgb(209, 209, 209);
  // padding: 20px 20px;
}
.gong-CM {
  width: 100%;
  height: 100%;
  background: rgb(209, 209, 209);
  display: flex;
  flex-direction: column;
  // align-items: center;
}
.CM-box1 {
  width: 100%;
  height: 25%;
  background: #fff;
  // background: greenyellow;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.KU-box1 {
  width: 50%;
  height: 100%;
  // background: pink;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#main {
  width: 100%;
  height: 100%;
  margin-top: 50px;
  background: rgba(248, 47, 47, 0.068);
}

.B-box1 {
  width: 100%;
  height: 30%;
  display: flex;
  align-items: center;
  // background: red;
}
.B-box1 div {
  padding: 0px 20px;
}
.B-box1 div span {
  margin: 0px 10px;
  color: #ccc;
}
.B-box2 {
  width: 100%;
  height: 70%;
  display: flex;
  align-items: center;
  // background: rgb(180, 159, 159);
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.B-box2 div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.B-box2 div span {
  padding: 5px 0px;
}
.span-span1 {
  font-size: 10px;
}
.span-span {
  font-weight: bolder;
  // font-size: 30px;
}
.span-span b {
  font-size: 30px;
}
.KU-box2 {
  width: 50%;
  height: 100%;
  // background: powderblue;
}
.B-box1-1 {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.B-box1-1 div {
  padding: 0px 40px;
  font-size: 12px;
  color: #ccc;
}
.CM-box2 {
  width: 100%;
  height: 25%;
  background: rgb(209, 209, 209);
  // background: rgb(219, 142, 17);
  margin: 10px 0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.KU-box1-1 {
  width: 48%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  // background: rgb(177, 255, 245);
}
.KU-box2-2 {
  background: #fff;
  width: 48%;
  height: 100%;
  // background: rgb(175, 253, 181);
}
.B-B-box2 {
  width: 100%;
  height: 30%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.B-B-box2 div {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.B-B-box2 div span {
  padding: 5px 0px;
}
.CM-box3 {
  width: 100%;
  height: 40%;
  background: #fff;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Bbutt-box1-1 {
  width: 100%;
  height: 50px;
  display: flex;
  // background: papayawhip;
  justify-content: space-between;
  align-items: center;
}
.Bbutt-box1-1 div {
  margin: 0px 20px;
  width: 100px;
  height: 30px;
  // background: paleturquoise;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Bbutt-box1-1 div button {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  outline: none;
  border: none;
}
.button1-1 {
  background: rgb(223, 223, 223);
  color: #000;
  // border: 1px solid #ccc;
}
.button1-2 {
  background: rgb(24, 189, 240);
  color: #fff;
  // border: 1px solid #ccc;
}
</style>